#{extends 'Application/index.html' /} #{set 'title'} &{'week'} #{/set}
%{ def prevWeek = debutSemaine.minusWeeks(1); def nextWeek =
debutSemaine.plusWeeks(1); }%
<div class="headerPanel">
	<table class="header">
		<thead>
			<tr>
				<th><a
					href="@{Application.week(prevWeek.year().get(),prevWeek.weekOfWeekyear().get())}"
					class="btn btn-primary">prev</a></th>
				<th>from <strong> ${moisDebut} ${joursDebut}
						${yearDebut} </strong> to <strong> ${moisFin} ${joursFin}
						${yearFin} </strong>
				</th>
				<th><a
					href="@{Application.week(nextWeek.year().get(),nextWeek.weekOfWeekyear().get())}"
					class="btn btn-primary ">next</a></th>
			</tr>
		</thead>
	</table>
</div>
<div id="mainbody" class="printAlignLeft">
	<div id="gridcontainer" class="" style="height: 278px;">
		<div id="topcontainer">
			<table class="wk-weektop wk-full-mode" cellspacing="0"
				cellpadding="0">
				<thead>
				<tbody>
					<tr class="wk-daynames">
						<td class="wk-tzlabel" rowspan="3" style="width: 60px">GMT+01</td>
						#{list items:1..7, as :'idSemaine'} %{debutSemaine =
						debutSemaine.withDayOfWeek(idSemaine); }%
						<th title=${debutSemaine.toDate().format('yyyy-MM-ddHH:mm')}>
							<div class='wk-dayname'>
								<span>${debutSemaine.dayOfWeek().getAsText(java.util.Locale.FRENCH)}.
									${debutSemaine.dayOfMonth().get()} </span>
							</div>
						</th> #{/list}
						<th class="wk-dummyth" rowspan="3" style="width: 20px;">&nbsp;</th>
					</tr>
				</thead>
				</tbody>
			</table>
		</div>
		<!--  section a comprendre  -->
		<div id="scrolltimedeventswk" class="wk-scrolltimedevents"
			style="height: 400px;">
			<div class="tg-mainwrapper" style="margin-top: 0px;">
				<table id="tgTable" class="tg-timedevents" style="height: 1010px"
					cellpadding="0" cellspacing="0">
					<tbody>
						<tr height="1">
							<td style="width: 60px;"></td>
						</tr>
						<!-- Cette partie permet de placer les colonnes des heures -->
						<tr>

							<td class="tg-times-pri">#{list items:0..23, as: 'hour' } %{
								def stringHour = String.format("%02d",hour);}%
								<div style="height: 42px;">
									<div class="tg-time-pri" style="height: 41px;">${stringHour}:00</div>
								</div> #{/list}
								<div id="tgnowptr" class="tg-nowptr"
									style="left: 0px; top: 181px;"></div>
							</td>
							<!-- Partie a corriger ou on place les evenements -->

							#{list items:1..7, as :'idSemaine'} %{debutSemaine =
							debutSemaine.withDayOfWeek(idSemaine); }%

							<td class="tg-col"><div id=${debutSemaine.toDate().format(
									'yyyy-MM-dd HH:mm')}
									class="tg-col-eventwrapper"
									style="height: 1008px; margin-bottom: -1008px;"></div>
								<div class="tg-gutter"></div> #{/list}
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<script>

	function nbre_demiH(event){
		var heures = event.begin.split(" ")[1];
		var h_s =event.begin.split(" ")[1].split(":")[0];
		var m_s =event.begin.split(" ")[1].split(":")[1];
		var h = parseInt(h_s)
		var m = parseFloat(m_s)/30 ;
		var pixel = 21;
		return (h*2 + m)*pixel;
	}
	function duree(event){
		var duree_hh_mm = event.duree;
		
		duree_hh_mm =duree_hh_mm.split("-");
		var h_s = duree_hh_mm[0];
		var m_s = duree_hh_mm[1];
		var h = parseInt(h_s);
		var m = parseFloat(m_s)/30;
		
		var pixel = 19;
		return (h*2+m)*pixel;
	}
	function drawEvent(event) {
		console.log(event.name);
		var idDebut = event.begin.split(" ")[0];
		var link = 'td.tg-col div#'+idDebut;
		var topPx = parseInt(nbre_demiH(event)); // coeficient des pixels;
		var height = duree(event);
		var heureD =  event.begin.split(" ")[1].split(":")[0]+":"+event.begin.split(" ")[1].split(":")[1];
		var heureFin=  event.end.split(" ")[1].split(":")[0]+":"+event.end.split(" ")[1].split(":")[1];
		console.log(heureD);
		var div ='<div id=event'+event.id+' class="ro-chip-15 ca-evp19 chip" style="left: -1px; width: 100%;">'+'<dl id =event'+event.id+' class="cro cbrd"'+
		'style="height: 56px; border-color: #FFAD46; background-color: #FFAD46; color: #1d1d1d;">'+'<dt style="background-color:;">'+heureD+'-'+heureFin+'</dt>';
		var div1='<a href=/application/putevent?id='+event.id+' class="evt-lk ca-elp19" style="cursor: pointer;">';
		console.log('div1 = '+div1);
		console.log(typeof div1);
		var div2 ='Titre :'+event.name;
		var div3 = s3='</a></dl></div>';
		$(link).append(div+div1+div2+div3);
		var balise = $('div #event'+event.id);
		balise.css("top",topPx+"px");
		balise = $('dl#event'+event.id).css("height",height+"px");
		
	}
	var listOfEvents = [#{list items:events, as:'event'}
		{name:"${event.name}", begin:"${event.begin}",end:"${event.end}",duree :"${event.getDuringClass()}",id: "${event.getId()}"},
	#{/list}];
	
	$('dl ')
	for(i=0;i<listOfEvents.length;i++) {
		drawEvent(listOfEvents[i]);
	}
	console.log(listOfEvents);
</script>
